<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>7_1_1-3-手动追踪变量的变化 -响应式</title>
</head>

<body>


  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
  <script>
    //数据对象
    let a = {
      value: 1,
    };
    let b = {
      value: 2,
    };

    //定义触发器，用来刷新数据
    let trigger = null;

    //数据变量处理器，当数据变化时，调用触发器刷新
    handleA = {
      set(target, key, value) {
        target[key] = value;

        if (trigger) {
          trigger();
        }
      },
    };
    handleB = {
      set(target, key, value) {
        target[key] = value;
        if (trigger) {
          trigger();
        }
      },
    };

    //进行对象的代理包装
    let pa = new Proxy(a, handleA);
    let pb = new Proxy(b, handleB);
    let sum = 0;

    //实现触发器逻辑
    //箭头函数
    trigger = () => {
      sum = pa.value + pb.value;
    };
    trigger();
    console.log("开始");
    console.log(sum);
    pa.value = 3;
    pb.value = 4;
    console.log(sum);
  </script>
</body>

</html>